Scriptel ScripTouch Keyboard Wedge API: Tutorial: 02

Now that you've learned how to parse a signature using a ScripTouch EasyScript device you may be wondering how to hide the ugly text box so that your users never have to see the keyboard string.

This tutorial will walk you through adding a signature event listener to your document that will capture keyboard events before anything gets to your web application and will notify you of the signature. We'll be using Google Chrome for this example but this should work with the most recent versions of most popular browsers.

Start by creating a new text document and name it "easyscript02.html" and place it in the same folder as scriptel-easyscript.js that was distributed with the API package. In the file put the following code/markup:

<!DOCTYPE html>
<html>
    <head>
        <title>EasyScript Tutorial 02</title>
        <script type="text/javascript" src="scriptel-easyscript.js"></script>
        <script type="text/javascript">
            function init() {
                //Create a new EasyScript object.
                var escript = new ScriptelEasyScript();

                //Attach the keyboard listener to the document body
                //(this can be any DOM element).
                escript.addSignatureListener(document.body);

                //Now let the keyboard listener know we're interested in
                //knowing if we get a signature back.
                escript.registerSignatureCallback(function(sig) {
                    //Get our canvas.
                    var canvas = document.getElementById("signature");

                    //Blank our canvas
                    var ctx = canvas.getContext("2d");
                    ctx.fillStyle="white";
                    ctx.fillRect(0,0,480,128);

                    //Draw the signature on the canvas.
                    escript.drawSignatureOnCanvas(sig,canvas);
                });
            }
        </script>
    </head>
    <body onload="init()">
        <canvas width="480" height="128" id="signature"></canvas>
    </body>
</html>

Now try this example by loading it in your browser. You should see a blank page. Try signing on your signature pad and hitting "Ok". A couple seconds later you should see your signature appear on the screen without hitting any buttons.

This works because in this example you've attached a signature listener to the document. This listener intercepts keyboard presses as they're generated and it looks for the pattern of a ScripTouch signature pad. If the signature is found it prevents the keys from being pressed and it captures the output.

After an entire signature is captured it's parsed and sent off to any interested parties. The registerSignatureCallback function let the EasyScript object know you were interested in being notified when a signature was captured. The body of the function in registerSignatureCallback is called any time a signature is captured and parsed. The sig argument is the signature that was captured.

Tutorial: 02 - Capturing a Signature

02 - Capturing a Signature